<template>
  <section style="min-width:1300px">
    <div class="myContent">
      <div class="nofound">
        <h1>404</h1>
        <h2>Why?<span class="red"> Page error?!</span> </h2>
        <h3>When people are traveling, they will inevitably lose their way. Fortunately, you can.</h3>
        <p>You can try to <b @click="reload"
             class="red">refresh the page later </b>, or <b class="red"
             @click="gohome"> jump to the home page</b> </p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'notfound',
  data () {
    return {
      reloadMenu: false
    }
  },
  created () {

  },

  methods: {
    reload () {
      window.location.reload()
    },
    gohome () {
      this.$router.replace("/");
    }
  }
}
</script>

<style scoped>
.myContent {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../../image/404.png") no-repeat scroll 0 0;
  background-size: cover;
}
.nofound {
  position: absolute;
  top: 40%;
  left: 60%;
  transform: translate(-50%, -50%);
}
.nofound h1 {
  font-size: 100px;
  margin-bottom: 20px;
}
.nofound h2 {
  font-size: 43px;
  margin-bottom: 5px;
}
.nofound h3 {
  font-size: 16px;
  margin-bottom: 50px;
}
.nofound p {
  font-size: 14px;
}
.nofound .red {
  color: #e63123;
}
.nofound p b {
  cursor: pointer;
}
</style>
